<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!-- 1. 单选框 -->
            <label for="agree">
                <input type="checkbox" v-model="agree">同意协议
            </label>
            <button :disabled="!agree">下一步</button>

            <!-- 2.多选框 -->
            <div>
                <label for="">
                    <input type="checkbox" v-model="hobbies" value="篮球">篮球
                    <input type="checkbox" v-model="hobbies" value="足球">足球
                    <input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球
                    <input type="checkbox" v-model="hobbies" value="冰球">冰球
                </label>
                <div>
                    宁的爱好是{{hobbies}}
                </div>
                
            </div>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    agree: false,
                    hobbies: [],
                }
            })
        </script>
    </body>
</html>